<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>多选</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
    *{padding:0;margin:0; font-family: '微软雅黑';}
    a{text-decoration: none;}
    h1{padding-top: 35px;}
    .text_cneter{text-align: center;}
    .list{text-align: center;padding: 40px 0 30px;}
    .list li{display: inline-block;}
    .list li a{padding: 10px 20px;background: #ccc;color: #333;display: block;}
    .list li a:hover,.list li.select a{background: #21b384;color: #fff;}
    .content{text-align: center;}
    .content li{ float:left; display:block; width: 230px; height: 175px; line-height: 175px;  font-size: 30px; color: #fff; margin:4px 5px; background: #21b384;}
    .content li a{ color: #fff;}

</style>
</head>
<body>
    <h1 class="text_cneter">多选</h1>
    <div class="box">
        <ul class="list">
            <li data-select="1"><a href="javascript:;">代码</a></li>
            <li data-select="2"><a href="javascript:;">素材</a></li>
            <li data-select="3"><a href="javascript:;">模版</a></li>
        </ul>
        <ul class="content">
            <li data-list="1"><a href="javascript:;">PIC1</a></li>
            <li data-list="1"><a href="javascript:;">PIC1</a></li>
            <li data-list="1"><a href="javascript:;">PIC1</a></li>
            <li data-list="1"><a href="javascript:;">PIC1</a></li>
            <li data-list="2"><a href="javascript:;">PIC2</a></li>
            <li data-list="2"><a href="javascript:;">PIC2</a></li>
            <li data-list="3"><a href="javascript:;">PIC3</a></li>
            <li data-list="3"><a href="javascript:;">PIC3</a></li>
            <li data-list="2"><a href="javascript:;">PIC2</a></li>
            <li data-list="2"><a href="javascript:;">PIC2</a></li>
            <li data-list="3"><a href="javascript:;">PIC3</a></li>
            <li data-list="3"><a href="javascript:;">PIC3</a></li>
            <li data-list="2"><a href="javascript:;">PIC2</a></li>
            <li data-list="3"><a href="javascript:;">PIC3</a></li>
        </ul>
    </div>
</body>
<script src="jquery2.1.1.min.js"></script>
<script>
    $(document).ready(function() {
        //定义变量
        var li = $('.list li'); 
        var cli = $('.content li'); 
        var len = li.length;  
        var clen = cli.length;
        //定义多选遍历函数  
        var filter = function(){
            for(j=0;j<len;j++){
                //判断当前遍历选项是否为选中状态  
                if(li.eq(j).hasClass('select')){  
                    for(i=0; i<clen; i++){     
                        var lst = cli.eq(i).attr('data-list');  
                        var sel = li.eq(j).attr('data-select');
                        //判断选中选项是否和列表的属性相等  
                        if(sel == lst){  
                            cli.eq(i).show();  
                        }
                    }
                }
            }
        }
        li.click(function(){ 
            //判断点击对象是否为选中状态
            if($(this).hasClass('select')){ 
                $(this).removeClass('select');
                //判断选项中是否含有选中的对象
                if(li.hasClass('select')){  
                    cli.hide();  
                    filter(); 
                }
                else{
                    cli.show();
                }
            }else{
                $(this).addClass('select');
                cli.hide();
                filter();
            }
        })
    });


</script>
</html>